<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能房间占用监控系统</title>
    <!-- 预加载关键资源 -->
    <link rel="preload" href="{{ url_for('static', filename='css/style.css') }}?v=7.0" as="style">
    <link rel="preload" href="{{ url_for('static', filename='echarts.min.js') }}" as="script">
    <link rel="preload" href="{{ url_for('static', filename='js/modules/app-main.js') }}?v=2.0" as="script">
    <!-- 引入现代图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" onerror="console.log('FontAwesome CDN failed, using fallback')">
    <!-- 备用图标库 -->
    <link href="https://use.fontawesome.com/releases/v6.4.0/css/all.css" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
    <!-- 样式文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}?v=7.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/inline-critical.css') }}?v=7.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/models-performance.css') }}?v=2.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/modal-style.css') }}">
</head>
<body>
    <!-- 预加载提示 -->
    <div id="preload-message">
        <div class="spinner-container">
            <div class="spinner"></div>
        </div>
        <div class="message">系统正在初始化，请稍候...</div>
    </div>
    

    
    <!-- 侧边导航栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="logo-container">
                <i class="fas fa-home"></i>
                <h2>智能监控</h2>
            </div>
        </div>
        <ul class="nav-links">
            <li class="nav-item active" data-section="visualization">
                <i class="fas fa-chart-line"></i>
                <span>历史数据</span>
            </li>
            <li class="nav-item" data-section="analysis">
                <i class="fas fa-chart-pie"></i>
                <span>数据分析</span>
            </li>
            <li class="nav-item" data-section="prediction">
                <i class="fas fa-brain"></i>
                <span>智能预测</span>
            </li>
            <li class="nav-item" data-section="models">
                <i class="fas fa-microchip"></i>
                <span>模型性能</span>
            </li>
            <li class="nav-item" data-section="settings">
                <i class="fas fa-cog"></i>
                <span>系统设置</span>
            </li>
        </ul>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 数据可视化部分 -->
        <div id="visualization" class="section active">
            <div class="header-container">
                <div class="header-title">
                    <h1><i class="fas fa-chart-area"></i> 房间占用数据可视化</h1>
                    <p class="subtitle">实时监控房间传感器数据变化趋势</p>
                </div>
                <div class="header-controls">
                    <button id="refresh-data" class="btn btn-primary">
                        <i class="fas fa-sync-alt" id="refresh-icon"></i>
                        <span>刷新数据</span>
                    </button>
                    <div class="status-badge">
                        <i class="fas fa-clock"></i>
                        <span id="last-update">最后更新: --</span>
                    </div>
                </div>
            </div>
            
            <!-- 时间范围过滤器 -->
            <div class="time-range-filter">
                <div class="filter-header">
                    <h3><i class="fas fa-filter"></i> 数据时间范围</h3>
                    <div class="current-range" id="current-range">
                        <span class="range-label">当前范围:</span>
                        <span class="range-value">显示全部数据</span>
                    </div>
                </div>
                <div class="filter-content">
                    <div class="date-inputs">
                        <div class="date-input">
                            <label for="start-date"><i class="fas fa-calendar-alt"></i> 开始日期</label>
                            <input type="date" id="startDate">
                        </div>
                        <div class="date-input">
                            <label for="end-date"><i class="fas fa-calendar-alt"></i> 结束日期</label>
                            <input type="date" id="endDate">
                        </div>
                        <div class="filter-button">
                            <button id="apply-time-filter" class="btn btn-secondary">
                                <i class="fas fa-search"></i>
                                应用筛选
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 错误消息 -->
            <div id="error-message" class="error-message"></div>
            

            
            <!-- 图表容器 - 左大右小布局 -->
            <div id="charts-container" class="charts-container charts-asymmetric">
                <!-- 主要图表行 -->
                <div class="chart-row main-row">
                    <!-- 左侧大图表 - 温度传感器 -->
                    <div class="chart-container chart-large">
                        <div id="tempChart" class="chart"></div>
                    </div>
                    
                    <!-- 右侧小图表列 -->
                    <div class="chart-column-right">
                        <!-- 光照图表 -->
                        <div class="chart-container chart-small">
                            <div id="lightChart" class="chart"></div>
                        </div>
                        
                        <!-- 声音图表 -->
                        <div class="chart-container chart-small">
                            <div id="soundChart" class="chart"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 底部全宽图表 -->
                <div class="chart-row bottom-row">
                    <div class="chart-container chart-full">
                        <div id="otherChart" class="chart"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 数据分析部分 - 已清空，等待重新设计 -->
        <div id="analysis" class="section">
            <div class="header-container">
                <div class="header-title">
                    <h1><i class="fas fa-chart-pie"></i> 房间占用预测分析</h1>
                    <p class="subtitle">天气预报式房间占用预测系统</p>
                </div>
                <div class="header-controls">
                    <div class="status-badge">
                        <i class="fas fa-sync-alt"></i>
                        <span class="last-update-time">等待数据...</span>
                    </div>
                </div>
            </div>
            
            <!-- 天气预报式房间占用预测布局 -->
            <div class="weather-style-layout">
                
                <!-- 1. 顶部区域：当前状态 + 占用人数 -->
                <div class="current-status-section">
                    <div class="current-occupancy">
                        <div class="occupancy-main">
                            <div class="occupancy-number">X</div>
                            <div class="occupancy-unit">人</div>
                        </div>
                        <div class="status-desc">当前房间状态</div>
                    </div>
                    <div class="current-environment">
                        <div class="primary-metrics">
                            <div class="metric-large">
                                <div class="metric-value">29°</div>
                                <div class="metric-label">体感温度</div>
                            </div>
                            <div class="metric-status">热</div>
                        </div>
                    </div>
                </div>

                <!-- 2. 主要控制区域：类似天气预报的详细信息 -->
                <div class="main-control-section">
                    <!-- 左侧：设备控制卡片 -->
                    <div class="control-cards">
                        <div class="control-card ac-card">
                            <div class="card-header">
                                <div class="card-icon">🌡️</div>
                                <div class="card-title">智能空调温度</div>
                            </div>
                            <div class="card-content">
                                <div class="card-desc">预测未来房内人数变多，是否对空调温度进行调节</div>
                                <div class="card-action">立即调节</div>
                            </div>
                        </div>
                        <div class="control-card light-card">
                            <div class="card-header">
                                <div class="card-icon">💡</div>
                                <div class="card-title">灯光控制</div>
                            </div>
                            <div class="card-status">灯光已关闭</div>
                        </div>
                    </div>

                    <!-- 右侧：环境指标网格 -->
                    <div class="environment-metrics-grid">
                        <div class="metric-item uv-metric">
                            <div class="metric-header">
                                <div class="metric-icon">☀️</div>
                                <div class="metric-name">紫外线</div>
                            </div>
                            <div class="metric-main">
                                <div class="metric-value">2</div>
                                <div class="metric-status">弱</div>
                            </div>
                        </div>
                        <div class="metric-item humidity-metric">
                            <div class="metric-header">
                                <div class="metric-icon">💧</div>
                                <div class="metric-name">湿度</div>
                            </div>
                            <div class="metric-main">
                                <div class="metric-value">81%</div>
                                <div class="metric-status">舒适</div>
                            </div>
                        </div>
                        <div class="metric-item temp-metric">
                            <div class="metric-header">
                                <div class="metric-icon">🌡️</div>
                                <div class="metric-name">体感</div>
                            </div>
                            <div class="metric-main">
                                <div class="metric-value">29°</div>
                                <div class="metric-status">热</div>
                            </div>
                        </div>
                        <div class="metric-item sunset-metric">
                            <div class="metric-header">
                                <div class="metric-icon">🌅</div>
                                <div class="metric-name">日落</div>
                            </div>
                            <div class="metric-main">
                                <div class="metric-value">19:26</div>
                                <div class="metric-status">日落</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3. 每小时预测：天气预报风格的时间线 -->
                <div class="hourly-forecast-section">
                    <div class="forecast-header">
                        <div class="section-title">每小时预测</div>
                        <div class="forecast-type">占用趋势</div>
                        <div class="forecast-controls">
                            <button class="forecast-btn active">温度</button>
                            <button class="forecast-btn">光线</button>
                            <button class="forecast-btn">人数</button>
                        </div>
                    </div>
                    
                    <div class="forecast-timeline">
                        <div class="forecast-hour">
                            <div class="hour-time">12:00</div>
                            <div class="hour-icon">🌡️</div>
                            <div class="hour-temp">34.6°C</div>
                            <div class="hour-people">3人</div>
                        </div>
                        <div class="forecast-hour">
                            <div class="hour-time">13:00</div>
                            <div class="hour-icon">🌡️</div>
                            <div class="hour-temp">33°C</div>
                            <div class="hour-people">2人</div>
                        </div>
                        <div class="forecast-hour future">
                            <div class="hour-time">14:00</div>
                            <div class="hour-icon">❓</div>
                            <div class="hour-temp">--°C</div>
                            <div class="hour-people">--人</div>
                        </div>
                        <div class="forecast-hour future">
                            <div class="hour-time">15:00</div>
                            <div class="hour-icon">❓</div>
                            <div class="hour-temp">--°C</div>
                            <div class="hour-people">--人</div>
                        </div>
                        <div class="forecast-hour future">
                            <div class="hour-time">16:00</div>
                            <div class="hour-icon">❓</div>
                            <div class="hour-temp">--°C</div>
                            <div class="hour-people">--人</div>
                        </div>
                    </div>
                </div>

                <!-- 4. 趋势图表：天气预报式的图表展示 -->
                <div class="trend-chart-section">
                    <div class="chart-header">
                        <div class="chart-title">24小时趋势</div>
                        <div class="chart-subtitle">房间占用预测曲线</div>
                    </div>
                    
                    <div class="chart-container">
                        <div class="chart-time-labels">
                            <span>0</span>
                            <span>6</span>
                            <span>12</span>
                            <span>18</span>
                            <span>24</span>
                        </div>
                        
                        <div class="chart-area">
                            <svg class="trend-chart" viewBox="0 0 800 200">
                                <!-- 网格线 -->
                                <defs>
                                    <pattern id="grid" width="50" height="25" patternUnits="userSpaceOnUse">
                                        <path d="M 50 0 L 0 0 0 25" fill="none" stroke="#e5e7eb" stroke-width="0.5" opacity="0.3"/>
                                    </pattern>
                                </defs>
                                <rect width="100%" height="100%" fill="url(#grid)" />
                                
                                <!-- 趋势曲线 -->
                                <path d="M 50 150 Q 200 100 300 120 Q 500 80 600 100 Q 700 130 750 110" 
                                      stroke="#3b82f6" stroke-width="3" fill="none"/>
                                
                                <!-- 数据点 -->
                                <circle cx="50" cy="150" r="4" fill="#3b82f6"/>
                                <circle cx="200" cy="100" r="4" fill="#3b82f6"/>
                                <circle cx="300" cy="120" r="4" fill="#3b82f6"/>
                                <circle cx="500" cy="80" r="4" fill="#3b82f6"/>
                                <circle cx="600" cy="100" r="4" fill="#3b82f6"/>
                                <circle cx="700" cy="130" r="4" fill="#3b82f6"/>
                                <circle cx="750" cy="110" r="4" fill="#3b82f6"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 占用预测部分 -->
        <div id="prediction" class="section">
            <div class="header-container">
                <div class="header-title">
                    <h1><i class="fas fa-brain"></i> 智能房间占用预测</h1>
                    <p class="subtitle">基于机器学习的房间占用智能预测系统</p>
                </div>
                <div class="header-controls">
                    <button id="predict-now" class="btn btn-success">
                        <i class="fas fa-play-circle" id="predict-icon"></i>
                        <span>立即预测</span>
                    </button>
                    <div class="status-badge">
                        <i class="fas fa-clock"></i>
                        <span id="last-prediction-time">上次预测: --</span>
                    </div>
                </div>
            </div>
            
            <!-- 预测页面导航栏 -->
            <div class="prediction-navigation">
                <div class="prediction-nav-items">
                    <div class="prediction-nav-item active" data-tab="occupancy">
                        <i class="fas fa-users"></i>
                        <span>占用预测</span>
                    </div>
                    <div class="prediction-nav-item" data-tab="room1">
                        <i class="fas fa-door-open"></i>
                        <span>Room_1 数据</span>
                    </div>
                    <div class="prediction-nav-item" data-tab="room2">
                        <i class="fas fa-door-open"></i>
                        <span>Room_2 数据</span>
                    </div>
                    <div class="prediction-nav-item" data-tab="room3">
                        <i class="fas fa-door-open"></i>
                        <span>Room_3 数据</span>
                    </div>
                </div>
            </div>
            
            <!-- 预测内容区域 -->
            <div class="prediction-content">
                <!-- 占用预测标签页 -->
                <div class="prediction-tab-content active" data-content="occupancy">

            

            
            <!-- 错误消息 -->
            <div id="prediction-error-message" class="error-message"></div>
            
            <!-- 加载提示 -->
            <div id="prediction-loading-message">
                <div class="loading-spinner"></div>
                正在进行AI预测分析，请稍候...
            </div>
            
            <!-- 图表容器 - 左大右小布局 -->
            <div id="prediction-charts-container" class="charts-container charts-asymmetric">
                <!-- 主要图表行 -->
                <div class="chart-row main-row">
                    <!-- 左侧大图表 - 预测温度传感器 -->
                    <div class="chart-container chart-large">
                        <div id="predictionTempChart" class="chart"></div>
                    </div>
                    
                    <!-- 右侧小图表列 -->
                    <div class="chart-column-right">
                        <!-- 预测光照图表 -->
                        <div class="chart-container chart-small">
                            <div id="predictionLightChart" class="chart"></div>
                        </div>
                        
                        <!-- 预测声音图表 -->
                        <div class="chart-container chart-small">
                            <div id="predictionSoundChart" class="chart"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 底部全宽图表 -->
                <div class="chart-row bottom-row">
                    <div class="chart-container chart-full">
                        <div id="predictionOccupancyChart" class="chart"></div>
                    </div>
                </div>
            </div>
                </div>
                
                <!-- Room_1 数据标签页 -->
                <div class="prediction-tab-content" data-content="room1">
                    <div class="room-data-container">
                        <div class="room-header">
                            <h2><i class="fas fa-door-open"></i> Room_1 数据监控</h2>
                            <p class="room-subtitle">实时显示 Room_1 的传感器数据和状态</p>
                        </div>
                        <div class="coming-soon">
                            <i class="fas fa-chart-area"></i>
                            <h3>Room_1 数据展示</h3>
                            <p>此功能正在开发中，将显示Room_1的详细传感器数据...</p>
                        </div>
                    </div>
                </div>
                
                <!-- Room_2 数据标签页 -->
                <div class="prediction-tab-content" data-content="room2">
                    <div class="room-data-container">
                        <div class="room-header">
                            <h2><i class="fas fa-door-open"></i> Room_2 数据监控</h2>
                            <p class="room-subtitle">实时显示 Room_2 的传感器数据和状态</p>
                        </div>
                        <div class="coming-soon">
                            <i class="fas fa-chart-area"></i>
                            <h3>Room_2 数据展示</h3>
                            <p>此功能正在开发中，将显示Room_2的详细传感器数据...</p>
                        </div>
                    </div>
                </div>
                
                <!-- Room_3 数据标签页 -->
                <div class="prediction-tab-content" data-content="room3">
                    <div class="room-data-container">
                        <div class="room-header">
                            <h2><i class="fas fa-door-open"></i> Room_3 数据监控</h2>
                            <p class="room-subtitle">实时显示 Room_3 的传感器数据和状态</p>
                        </div>
                        <div class="coming-soon">
                            <i class="fas fa-chart-area"></i>
                            <h3>Room_3 数据展示</h3>
                            <p>此功能正在开发中，将显示Room_3的详细传感器数据...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 模型性能部分 -->
        <div id="models" class="section">
            <div class="header-container">
                <div class="header-title">
                    <h1><i class="fas fa-microchip"></i> 机器学习模型性能</h1>
                    <p class="subtitle">四种智能预测模型的性能对比与分析</p>
                </div>
                <div class="header-controls">
                    <button id="refresh-models" class="btn btn-primary">
                        <i class="fas fa-sync-alt" id="refresh-models-icon"></i>
                        <span>刷新数据</span>
                    </button>
                    <div class="status-badge">
                        <i class="fas fa-chart-bar"></i>
                        <span>模型对比分析</span>
                    </div>
                </div>
            </div>
            
            <!-- 模型概览卡片 -->
            <div class="models-overview">
                <div class="model-card random-forest clickable-card" onclick="openModelDetail('rf')">
                    <div class="model-header">
                        <div class="model-icon">
                            <i class="fas fa-tree"></i>
                        </div>
                        <div class="model-title">
                            <h3>随机森林</h3>
                            <p>Random Forest</p>
                        </div>
                    </div>
                    <div class="model-metrics">
                        <div class="metric-item">
                            <span class="metric-label">R²</span>
                            <span class="metric-value">0.9919</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">RMSE</span>
                            <span class="metric-value">0.0804</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">训练时间</span>
                            <span class="metric-value">0.90s</span>
                        </div>
                    </div>
                    <div class="model-description">
                        集成学习算法，通过构建多个决策树并投票决策，具有良好的泛化能力。
                    </div>
                    <div class="model-card-overlay">
                        <i class="fas fa-arrow-right"></i>
                        <span>体验模型</span>
                    </div>
                </div>
                
                <div class="model-card xgboost clickable-card" onclick="openModelDetail('xgb')">
                    <div class="model-header">
                        <div class="model-icon">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <div class="model-title">
                            <h3>XGBoost</h3>
                            <p>Extreme Gradient Boosting</p>
                        </div>
                    </div>
                    <div class="model-metrics">
                        <div class="metric-item">
                            <span class="metric-label">R²</span>
                            <span class="metric-value">0.9900</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">RMSE</span>
                            <span class="metric-value">0.0893</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">训练时间</span>
                            <span class="metric-value">1.41s</span>
                        </div>
                    </div>
                    <div class="model-description">
                        梯度提升算法的高效实现，在结构化数据上表现优秀，支持并行计算。
                    </div>
                    <div class="model-card-overlay">
                        <i class="fas fa-arrow-right"></i>
                        <span>体验模型</span>
                    </div>
                </div>
                
                <div class="model-card lstm clickable-card" onclick="openModelDetail('lstm')">
                    <div class="model-header">
                        <div class="model-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <div class="model-title">
                            <h3>LSTM</h3>
                            <p>Long Short-Term Memory</p>
                        </div>
                    </div>
                    <div class="model-metrics">
                        <div class="metric-item">
                            <span class="metric-label">R²</span>
                            <span class="metric-value">0.9946</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">RMSE</span>
                            <span class="metric-value">0.0658</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">训练时间</span>
                            <span class="metric-value">148.14s</span>
                        </div>
                    </div>
                    <div class="model-description">
                        深度学习循环神经网络，擅长处理序列数据，能够捕捉长期时间依赖。
                    </div>
                    <div class="model-card-overlay">
                        <i class="fas fa-arrow-right"></i>
                        <span>体验模型</span>
                    </div>
                </div>
                
                <div class="model-card ensemble clickable-card" onclick="openModelDetail('ensemble')">
                    <div class="model-header">
                        <div class="model-icon">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <div class="model-title">
                            <h3>集成模型</h3>
                            <p>Ensemble Prediction</p>
                        </div>
                    </div>
                    <div class="model-metrics">
                        <div class="metric-item">
                            <span class="metric-label">综合准确率</span>
                            <span class="metric-value">97.2%</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">稳定性</span>
                            <span class="metric-value">优秀</span>
                        </div>
                        <div class="metric-item">
                            <span class="metric-label">响应时间</span>
                            <span class="metric-value">< 100ms</span>
                        </div>
                    </div>
                    <div class="model-description">
                        融合多个模型的预测结果，通过投票或平均机制提高预测准确性和鲁棒性。
                    </div>
                    <div class="model-card-overlay">
                        <i class="fas fa-arrow-right"></i>
                        <span>体验模型</span>
                    </div>
                </div>
            </div>
            
            <!-- 性能对比图表 -->
            <div class="performance-charts">
                <div class="chart-row">
                    <div class="chart-container performance-metrics">
                        <div class="chart-header">
                            <div class="chart-title">
                                <i class="fas fa-chart-bar"></i>
                                <span>模型性能指标对比</span>
                            </div>
                            <div class="chart-info">R²决定系数、RMSE均方根误差对比</div>
                        </div>
                        <div id="metricsComparisonChart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container training-time">
                        <div class="chart-header">
                            <div class="chart-title">
                                <i class="fas fa-clock"></i>
                                <span>训练时间对比</span>
                            </div>
                            <div class="chart-info">各模型训练耗时分析</div>
                        </div>
                        <div id="trainingTimeChart" class="chart"></div>
                    </div>
                </div>
                
                <div class="chart-row">
                    <div class="chart-container radar-chart">
                        <div class="chart-header">
                            <div class="chart-title">
                                <i class="fas fa-radar"></i>
                                <span>综合性能雷达图</span>
                            </div>
                            <div class="chart-info">多维度性能评估与可视化</div>
                        </div>
                        <div id="performanceRadarChart" class="chart"></div>
                    </div>
                </div>
            </div>
            
            <!-- 详细分析面板 -->
            <div class="detailed-analysis">
                <div class="analysis-tabs">
                    <div class="tab-button active" data-tab="metrics">性能指标</div>
                    <div class="tab-button" data-tab="features">特征重要性</div>
                    <div class="tab-button" data-tab="predictions">预测分析</div>
                    <div class="tab-button" data-tab="comparison">模型对比</div>
                </div>
                
                <div class="tab-content">
                    <!-- 性能指标标签页 -->
                    <div class="tab-panel active" data-content="metrics">
                        <div class="metrics-table">
                            <h3>详细性能指标</h3>
                            <table class="performance-table">
                                <thead>
                                    <tr>
                                        <th>模型</th>
                                        <th>R² 决定系数</th>
                                        <th>RMSE 均方根误差</th>
                                        <th>MAE 平均绝对误差</th>
                                        <th>训练时间 (秒)</th>
                                        <th>模型大小</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="rf-row">
                                        <td><i class="fas fa-tree"></i> 随机森林</td>
                                        <td class="metric-good">0.9919</td>
                                        <td>0.0804</td>
                                        <td>0.0114</td>
                                        <td class="metric-good">0.90</td>
                                        <td>2.4 MB</td>
                                    </tr>
                                    <tr class="xgb-row">
                                        <td><i class="fas fa-rocket"></i> XGBoost</td>
                                        <td class="metric-good">0.9900</td>
                                        <td>0.0893</td>
                                        <td class="metric-good">0.0090</td>
                                        <td class="metric-good">1.41</td>
                                        <td>1.8 MB</td>
                                    </tr>
                                    <tr class="lstm-row">
                                        <td><i class="fas fa-brain"></i> LSTM</td>
                                        <td class="metric-excellent">0.9946</td>
                                        <td class="metric-excellent">0.0658</td>
                                        <td>0.0123</td>
                                        <td class="metric-poor">148.14</td>
                                        <td>5.2 MB</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 特征重要性标签页 -->
                    <div class="tab-panel" data-content="features">
                        <div class="features-analysis">
                            <h3>特征重要性分析</h3>
                            <p>各传感器特征对预测结果的贡献程度</p>
                            <div id="featureImportanceChart" class="chart"></div>
                        </div>
                    </div>
                    
                    <!-- 预测分析标签页 -->
                    <div class="tab-panel" data-content="predictions">
                        <div class="prediction-analysis">
                            <h3>预测准确性分析</h3>
                            <p>模型预测值与实际值的对比分析</p>
                            <div id="predictionAccuracyChart" class="chart"></div>
                        </div>
                    </div>
                    
                    <!-- 模型对比标签页 -->
                    <div class="tab-panel" data-content="comparison">
                        <div class="model-comparison">
                            <h3>综合对比分析</h3>
                            <div class="comparison-summary">
                                <div class="best-model">
                                    <h4><i class="fas fa-trophy"></i> 最佳精度</h4>
                                    <div class="winner">LSTM 模型</div>
                                    <div class="score">R² = 0.9946</div>
                                </div>
                                <div class="fastest-model">
                                    <h4><i class="fas fa-tachometer-alt"></i> 最快训练</h4>
                                    <div class="winner">随机森林</div>
                                    <div class="score">0.90 秒</div>
                                </div>
                                <div class="balanced-model">
                                    <h4><i class="fas fa-balance-scale"></i> 最佳平衡</h4>
                                    <div class="winner">随机森林</div>
                                    <div class="score">精度与速度兼顾</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 系统设置部分 -->
        <div id="settings" class="section">
            <div class="header-container">
                <div class="header-title">
                    <h1><i class="fas fa-cogs"></i> 系统设置</h1>
                    <p class="subtitle">配置系统参数和个性化选项</p>
                </div>
            </div>
            <div class="coming-soon">
                <i class="fas fa-tools"></i>
                <h3>功能开发中</h3>
                <p>此部分功能正在开发中，敬请期待...</p>
            </div>
        </div>
    </div>

    <!-- 模型体验模态框 -->
    <div id="modelExperienceModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h2 id="modalTitle">模型体验</h2>
                <button class="close-btn" onclick="closeModelModal()">&times;</button>
            </div>
            <div class="modal-content">
                <div class="model-info">
                    <h3 id="modelName">随机森林模型</h3>
                    <p id="modelDescription">基于多决策树的集成学习算法，具有良好的鲁棒性和预测准确度。</p>
                </div>
                
                <div class="input-section">
                    <h4>传感器数据输入</h4>
                    <div class="preset-buttons">
                        <button class="preset-btn" onclick="loadPresetData('morning')">早晨数据</button>
                        <button class="preset-btn" onclick="loadPresetData('afternoon')">下午数据</button>
                        <button class="preset-btn" onclick="loadPresetData('evening')">晚上数据</button>
                        <button class="preset-btn" onclick="loadPresetData('random')">随机数据</button>
                    </div>
                    
                    <div class="sensor-groups">
                        <!-- 温度传感器组 -->
                        <div class="sensor-group temp-group">
                            <label>温度传感器 (°C)</label>
                            <div class="sensor-inputs">
                                <input type="number" id="temp1" placeholder="传感器1" step="0.1" min="15" max="35">
                                <input type="number" id="temp2" placeholder="传感器2" step="0.1" min="15" max="35">
                                <input type="number" id="temp3" placeholder="传感器3" step="0.1" min="15" max="35">
                                <input type="number" id="temp4" placeholder="传感器4" step="0.1" min="15" max="35">
                            </div>
                        </div>
                        
                        <!-- 光照传感器组 -->
                        <div class="sensor-group light-group">
                            <label>光照传感器 (lux)</label>
                            <div class="sensor-inputs">
                                <input type="number" id="light1" placeholder="传感器1" min="0" max="1000">
                                <input type="number" id="light2" placeholder="传感器2" min="0" max="1000">
                                <input type="number" id="light3" placeholder="传感器3" min="0" max="1000">
                                <input type="number" id="light4" placeholder="传感器4" min="0" max="1000">
                            </div>
                        </div>
                        
                        <!-- 声音传感器组 -->
                        <div class="sensor-group sound-group">
                            <label>声音传感器 (dB)</label>
                            <div class="sensor-inputs">
                                <input type="number" id="sound1" placeholder="传感器1" step="0.01" min="0" max="1">
                                <input type="number" id="sound2" placeholder="传感器2" step="0.01" min="0" max="1">
                                <input type="number" id="sound3" placeholder="传感器3" step="0.01" min="0" max="1">
                                <input type="number" id="sound4" placeholder="传感器4" step="0.01" min="0" max="1">
                            </div>
                        </div>
                        
                        <!-- CO2传感器 -->
                        <div class="sensor-group co2-group">
                            <label>CO2浓度 (ppm)</label>
                            <div class="sensor-inputs">
                                <input type="number" id="co2" placeholder="CO2传感器" min="300" max="2000">
                            </div>
                        </div>
                        
                        <!-- PIR传感器 -->
                        <div class="sensor-group pir-group">
                            <label>PIR传感器</label>
                            <div class="sensor-inputs">
                                <input type="number" id="pir" placeholder="PIR传感器" step="0.1" min="0" max="10">
                            </div>
                        </div>
                        
                        <!-- 时间设置 -->
                        <div class="sensor-group time-group">
                            <label>时间设置</label>
                            <div class="sensor-inputs">
                                <input type="number" id="hour" placeholder="小时(0-23)" min="0" max="23">
                                <input type="number" id="occupancy" placeholder="是否有人(0/1)" min="0" max="1">
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="predict-btn" onclick="predictModel()">
                            <span class="btn-text">开始预测</span>
                            <span class="loading-spinner" style="display: none;"></span>
                        </button>
                    </div>
                </div>
                
                <div class="result-section" id="resultSection" style="display: none;">
                    <h4>预测结果</h4>
                    <div id="predictionResult" class="result-display"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- JavaScript引用 -->
    <!-- 核心库 -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}" defer></script>
    <script src="/static/three.js" defer></script>
    <script src="{{ url_for('static', filename='d3.v7.min.js') }}" defer></script>
    
    <!-- 模块化组件 -->
    <script src="{{ url_for('static', filename='js/modules/common-config.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/modules/chart-sync.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/modules/date-utils.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/modules/chart-utils.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/modules/temperature-chart.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/modules/light-chart.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/modules/sound-chart.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/modules/other-sensors-chart.js') }}" defer></script>
    
    <!-- 预测功能 -->
    <script src="{{ url_for('static', filename='js/prediction/prediction-main.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/prediction/occupancy-chart.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/prediction/temperature-chart.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/prediction/light-chart.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/prediction/sound-chart.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/prediction/chart-swapper.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/prediction/prediction-chart-manager.js') }}" defer></script>
    
    <!-- 模型性能 -->
    <script src="{{ url_for('static', filename='js/models-performance.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/model-modal.js') }}" defer></script>
    
    <!-- 数据分析页面实时更新 -->
    <script src="{{ url_for('static', filename='js/analysis-realtime.js') }}" defer></script>
    
    <!-- 主应用和内联脚本 -->
    <script src="{{ url_for('static', filename='js/modules/app-main.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/inline-scripts.js') }}" defer></script>
</body>
</html>
</html>